<template>
  <div>
    case1:<input v-model="message1" type="text" id="ipt">
    <hr>
    case2:<input v-model="message2" type="text">
    <br>
    <button @click="stopWatch">停止监听</button>
  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue"

const message1 = ref<string>('飞机')
const message2 = ref<string>('飞机杯子')

// watchEffect 与watch相比，会自动执行，直接返回最新的值
const stop = watchEffect((oninvalidate) => {
  let ipt:HTMLInputElement = document.querySelector("#ipt") as HTMLInputElement
  console.log("ipt=====>", ipt)
  console.log("message1=====>", message1.value)
  console.log("message2=====>", message2.value)

  oninvalidate(() => {
    console.log("before", "可以在此时清除数据，事件防抖等操作")
  })
}, {
  flush: 'post',   // 组件更新后监听 触发  这样就可以获取到组件或元素了  Vue2中是需要写在mouted生命周期中，去获取元素或者组件
  onTrigger(e:any) {
    debugger      // 直接进入调试模式
    console.log(e)
  }
})

const stopWatch = () => stop()

</script>

<style scoped></style>